<template>
  <el-card shadow="hover">
    <template #header>
      <nav class="flex justify-between">
        模糊搜索
        <el-link type="primary" target="_blank" href="https://fusejs.io">fuse.js</el-link>
      </nav>
    </template>

    <el-input v-model="value" placeholder="请输入"></el-input>

    {{search}}
  </el-card>
</template>

<script setup lang="ts" name="fuse">
import Fuse from "fuse.js";
let value = shallowRef()

let list = [
  {
    title:'vue3',
    url:'http://localhost:8080'
  },
  {
    title:'nuxt3',
    url:'http://localhost'
  },
  {
    title:'ko2',
    url:'http://localhost'
  },
]

const fuse = new Fuse(list,{
  // 是否按优先级进行排序
  shouldSort: true,
  // 匹配算法放弃的时机， 阈值 0.0 需要完美匹配（字母和位置），阈值 1.0 将匹配任何内容。
  threshold: 0.4,
  // 匹配长度超过这个值的才会被认为是匹配的
  minMatchCharLength: 1,
  // 将被搜索的键列表。 这支持嵌套路径、加权搜索、在字符串和对象数组中搜索。
  // name：搜索的键
  // weight：对应的权重
  keys: [{name: 'title',weight: 0.7},{name: 'url',weight: 0.3}]
})

let search = ref([])
watch(value,newValue => {
  search.value = fuse.search(newValue)
})
</script>

<style scoped lang="less">

</style>
